<!--
 * @Author: 赵宇
 * @Description: 
 * @Date: 2023-02-27 16:08:50
 * @LastEditTime: 2023-04-17 16:25:36
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \pcj\src\components\columnSetting\index.vue
-->
<template>
  <el-popover trigger="hover">
    <draggable :list="props.modelValue" class="draggable" ghost-class="ghost" chosen-class="chosenClass" animation="300" @end="onEnd">
      <template #item="{ element }">
        <div class="item">
          <p class="item-link" v-if="element.required">
            <el-link type="primary" :underline="false">{{ element.label }}</el-link>
          </p>
          <el-checkbox v-else v-model="element.show" :indeterminate="false" @change="onCheckChange">{{ element.label }}</el-checkbox>
        </div>
      </template>
    </draggable>
    <template #reference>
      <el-button :size="size">
        <el-icon> <IEpGrid /> </el-icon>
      </el-button>
    </template>
  </el-popover>
</template>
<script setup>
import { post } from '@/api/index.js';
import draggable from 'vuedraggable';
let $message = inject('$message');
let emit = defineEmits(['update:modelValue']);

let props = defineProps({
  modelValue: {
    type: Array,
    default: () => {
      return [];
    }
  },
  name: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: ''
  }
});
const setColumn = async () => {
  if (!props.name) return;
  await post('ColumnSetting/CreateOrUpdate', {
    id: 0,
    interfaceName: props.name,
    columnJson: JSON.stringify(props.modelValue)
  });
};
const onCheckChange = async val => {
  emit('update:modelValue', props.modelValue);
  await setColumn();
  $message.success(`${val ? '显示' : '隐藏'}成功!`);
};
//拖拽结束的事件
const onEnd = async () => {
  emit('update:modelValue', props.modelValue);
  await setColumn();
  $message.success('修改排序成功!');
};
</script>
<style lang="scss" scoped>
.draggable {
  max-height: 300px;
  overflow-y: auto;
  .item {
    &-link {
      margin-left: 22px;
      height: 32px;
      line-height: 32px;
    }
  }
}
</style>
